import {Component} from 'react';
import { Layout,Breadcrumb ,Typography,Divider,Row, Col,Input ,TreeSelect ,Button } from 'antd';
import '../EquipmentAdd/index.css';
const { Title } = Typography;
const {Content } = Layout;
const { TreeNode } = TreeSelect;
const { TextArea } = Input;
class EquipmentAdd extends Component {
    constructor(props) {
      super(props);
      this.state = {
          id:"HXJ-01",
          name:"呼吸机",
          bednum:"101A",
          valuePosition:"",
          valueProfile:""
      }
    }
    sendData(){
      // console.log("this.state.valuePosition",this)
      let data = {
        id:this.state.id,
        name:this.state.name,
        beds_id:this.state.bednum,
        status:this.state.valuePosition,
        explain:this.state.valueProfile
      }
      console.log("this",data);
      
    }

    changeValue(e){
        this.setState({
          [e.target.name]:e.target.value
        },()=>{
          console.log(e.target.value)
        })
    }

    onChangePosition=valuePosition=> {
        console.log(valuePosition);
        this.setState({valuePosition});
    };
    render() { 
        return ( 
            <Layout className="layout">
            <Content style={{ padding: '0 50px' }}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>器材管理</Breadcrumb.Item>
                <Breadcrumb.Item>添加器材</Breadcrumb.Item>
              </Breadcrumb>
              <div className="site-layout-content">
              <Title level={3}>添加器材信息</Title>
              <Divider />
              <Row gutter={[0, 16]}>
                <Col span={12}>
                    <Title level={5}>器材编号</Title>
                    <Input placeholder="编号" style={{ width: '80%' }} size='large' name="id" allowClear="true" value={this.state.id} onChange={(e)=>this.changeValue(e)}/>
                </Col>
                <Col span={12}>
                    <Title level={5}>器材名称</Title>
                    <Input placeholder="名称" style={{ width: '80%' }} size='large' name="name" allowClear="true" value={this.state.name} onChange={(e)=>this.changeValue(e)}  />
                </Col>
                
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={12}>
                    <Title level={5}>使用床位</Title>
                    <Input placeholder="例如101A" style={{ width: '80%' }} size='large' name="bednum" allowClear="true" value={this.state.bednum} onChange={(e)=>this.changeValue(e)} />
                </Col>
                <Col span={12}>
                    <Title level={5}>状态</Title>
                    <TreeSelect
                        showSearch
                        style={{ width: '80%' }}
                        value={this.state.valuePosition}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="状态"
                        allowClear
                        treeDefaultExpandAll
                        onChange={this.onChangePosition}
                        size='large'
                        name="status"
                    >
                        <TreeNode value="未使用" title="未使用">
                        </TreeNode>
                        <TreeNode value="使用中" title="使用中">
                        </TreeNode>
                    </TreeSelect>
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={24}>
                    <Title level={5}>说明</Title>
                    <TextArea
                        value={this.state.valueProfile}
                        onChange={(e)=>this.changeValue(e)}
                        placeholder="器材说明"
                        autoSize={{ minRows: 3, maxRows: 5 }}
                        style={{ width: '90%' }} 
                        name="valueProfile"
                        size='large'
                        allowClear="true"
                    />
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={6} offset={9}>
                    <Button type="primary" size='large' block onClick={()=>this.sendData()}>添加</Button>
                </Col>
              </Row>
             </div>
            </Content>
          </Layout>
        );
    }
}
export default EquipmentAdd;